<template>
  <div ref="editorWrap"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import Editor from '@/plugins/editor'

export default defineComponent({
  name: 'MarkdownEditor',
  setup() {
    const editorWrap = ref()
    let editor!: Editor

    function getMarkdown() {
      return editor.getMarkdown()
    }
    function getHtml() {
      return editor.getHTML()
    }

    function setMarkdown(md: string) {
      return editor.setMarkdown(md)
    }

    onMounted(() => {
      editor = new Editor({
        el: editorWrap.value,
        initialEditType: 'markdown', // wysiwyg
        previewStyle: 'vertical',
        height: 'calc(100% - 40px)',
        minHeight: 'calc(100% - 40px)',
        initialValue: '',
        language: 'zh-CN',
        theme: 'light'
      })
    })

    onUnmounted(() => {
      editor.destroy()
    })

    return {
      editorWrap,
      getMarkdown,
      getHtml,
      setMarkdown
    }
  }
})
</script>

<style lang="less" scoped></style>
